import { useDispatch } from "react-redux";
import { uiActions } from "../../../../../../../store/slices/ui-slice";

import { ReactComponent as EditIcon } from "../../../../../../../assets/images/dm-edit.svg";

import classes from "./ChooseTypeDocumentItem.module.scss";

const ChooseTypeDocumentItem = ({
  documentTypeName,
  fileId,
  indexMessage,
  indexDocument,
}) => {
  const dispatch = useDispatch();
  const chooseTypeName = () => {
    dispatch(
      uiActions.setModal({
        name: "choosingTypeName",
        data: { rowId: indexMessage, fileId: fileId, docId: indexDocument },
        canClose: true,
        title: "Выбор типа подгружаемого документа",
      })
    );
  };

  return (
    <div className={`${classes["request-message-file-type"]} ml-30`}>
      <div className={`${classes["request-message-file-type-text"]} `}>
        <span
          className={`${classes["request-message-file-type-title"]} span-title`}
        >
          Тип файла
        </span>
        <span
          className={`${classes["request-message-file-type-description"]} span-styles`}
        >
          {documentTypeName || "Не определено"}
        </span>
      </div>

      <div className={`${classes["request-message-file-type-button"]} ml-30`}>
        <EditIcon
          className={`${classes["request-message-file-type-icon"]}`}
          onClick={chooseTypeName.bind(null)}
        />
      </div>
    </div>
  );
};

export default ChooseTypeDocumentItem;